<template>
  <div class="bg-shadow">
    <div class="add-coin">
      <div class="header flex-center">
        <span>添加币种</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="form"
        label-width="80px"
        label-position="left"
        size="small"
      >
        <el-form-item label="主链" prop="chain">
          <el-select v-model="form.chain" placeholder="请选择主链" filterable>
            <el-option v-for="(item,index) in chains" :value="item" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台" prop="platform">
          <el-select v-model="form.platform" placeholder="请选择平台" filterable>
            <el-option v-for="item in parallel" :value="item.platform" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="币种类型" prop="treaty">
          <el-select v-model="form.treaty" placeholder="请选择币种类型">
            <el-option label="coins" :value="2"></el-option>
            <el-option label="erc20 / token" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简称" prop="name" inline-message>
          <el-input v-model="form.name" placeholder="请填写大写简称，如：BTC"></el-input>
        </el-form-item>
        <el-form-item label="全称" class="tab-item">
          <el-tabs v-model="nameLang">
            <el-tab-pane label="中文" name="zh">
              <el-input v-model="form.nickname['zh-CN']" placeholder="中文全称，如：比特币"></el-input>
            </el-tab-pane>
            <el-tab-pane label="英文" name="en">
              <el-input v-model="form.nickname['en-US']" placeholder="英文全称，如：Bitcoin"></el-input>
            </el-tab-pane>
            <el-tab-pane label="日文" name="ja">
              <el-input v-model="form.nickname['ja']" placeholder="日文全称，如：ビットコイン"></el-input>
            </el-tab-pane>
            <el-tab-pane label="韩文" name="ko">
              <el-input v-model="form.nickname['ko']" placeholder="韩文全称，如：비트 코드"></el-input>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="合约地址" v-if="form.chain==='ETH'">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="币种精度">
          <el-input-number v-model="form.decimals" :min="0" :max="18"></el-input-number>
        </el-form-item>
        <el-form-item label="区块查询">
          <el-input v-model="form.area_search" placeholder="区块链浏览器查询地址"></el-input>
        </el-form-item>
        <el-form-item label="发行时间">
          <el-date-picker
            v-model="form.release"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="官网">
          <el-input v-model="form.official" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="白皮书">
          <el-input v-model="form.paper" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="发行总量">
          <el-input v-model.number="form.publish_count" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="流通总量">
          <el-input v-model.number="form.circulate_count" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="币种介绍" class="tab-item">
          <el-tabs v-model="introLang">
            <el-tab-pane label="中文" name="zh">
              <el-input
                v-model="form.introduce['zh-CN']"
                type="textarea"
                placeholder="币种中文简介"
                :rows="8"
                maxlength="300"
                show-word-limit
              ></el-input>
            </el-tab-pane>
            <el-tab-pane label="英文" name="en">
              <el-input
                v-model="form.introduce['en-US']"
                type="textarea"
                placeholder="币种英文简介"
                :rows="8"
                maxlength="300"
                show-word-limit
              ></el-input>
            </el-tab-pane>
            <el-tab-pane label="日文" name="ja">
              <el-input
                v-model="form.introduce['ja']"
                type="textarea"
                placeholder="币种日文简介"
                :rows="8"
                maxlength="300"
                show-word-limit
              ></el-input>
            </el-tab-pane>
            <el-tab-pane label="韩文" name="ko">
              <el-input
                v-model="form.introduce['ko']"
                type="textarea"
                placeholder="币种韩文简介"
                :rows="8"
                maxlength="300"
                show-word-limit
              ></el-input>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="币种图标">
          <el-upload
            ref="my-upload"
            :class="{'scaleIMGdisabled':disabledUpload===true}"
            :action="url"
            :data="{type:'application'}"
            :headers="headers"
            list-type="picture-card"
            :on-remove="remove"
            :on-error="error"
            :on-success="success"
            :before-upload="()=>{disabledUpload=true;onUpload=true}"
            :file-list="imgList"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">提示：建议图片尺寸100*100，图片大小进行压缩。</div>
          </el-upload>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="submit" :disabled="onSubmit">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  createToken,
  updateToken
} from "../../views/CoinsManage/Coins.service.js";
export default {
  props: ["operateData", "platform_id"],
  data() {
    return {
      url: "/root/api/oss/upload",
      headers: {
        token: this.$store.state.token
      },
      nameLang: "zh",
      introLang: "zh",
      form: {
        platform_id: Number(this.platform_id),
        nickname: {},
        introduce: {},
        decimals: 18,
        official: "",
        paper: "",
        treaty: ""
      },
      imgList: [],
      disabledUpload: false,
      onSubmit: false,
      onUpload: false,
      rules: {
        chain: [{ required: true, message: "主链不能为空", trigger: "blur" }],
        platform: [
          { required: true, message: "平台不能为空", trigger: "blur" }
        ],
        treaty: [
          { required: true, message: "币种类型不能为空", trigger: "blur" }
        ],
        name: [{ required: true, message: "简称不能为空", trigger: "blur" }]
      }
    };
  },
  computed: {
    chains() {
      return this.$store.state.main_chains;
    },
    parallel() {
      return this.$store.state.para_list;
    }
  },
  mounted() {
    this.TypeJudge();
  },
  methods: {
    async submit() {
      if (this.onSubmit === true) return;
      this.$refs["form"].validate(async valid => {
        if (valid) {
          this.onSubmit = true;
          const res =
            this.operateData.type === "edit"
              ? await updateToken(this.form)
              : await createToken(this.form);
          if (res.code === 0) {
            this.$notify.success({
              title: "提示",
              message:
                this.operateData.type === "edit" ? "编辑成功！" : "添加成功！"
            });
            this.$emit("success");
          }
          this.onSubmit = false;
        } else {
          this.$notify.warning({
            title: "提示",
            message: "请检查参数！"
          });
        }
      });
    },
    TypeJudge() {
      if (this.operateData.type === "add") return;
      else {
        this.form = JSON.parse(JSON.stringify(this.operateData.data));
        if (this.form.introduce === null)
          this.form.introduce = {
            "zh-CN": "",
            "en-US": "",
            ja: "",
            ko: ""
          };
        if (this.form.icon !== "") {
          this.disabledUpload = true;
          this.imgList = [{ url: this.form.icon }];
        }
      }
    },
    remove() {
      this.form.icon = "";
      this.disabledUpload = false;
    },
    error() {
      this.disabledUpload = false;
      this.onUpload = false;
      this.$notify.error({
        title: "提示",
        message: "图片上传失败！",
        duration: 1500
      });
    },
    success(res) {
      this.form.icon = res.data || "";
      this.onUpload = false;
      this.$notify.success({
        title: "提示",
        message: "图片上传成功",
        duration: 1500
      });
    }
  }
};
</script>

<style lang="scss">
.bg-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
}
.add-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 600px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  .header {
    margin-bottom: 10px;
    padding: 15px 0;
    span {
      font-weight: 600;
      font-size: 18px;
    }
    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }
    i:hover {
      color: #409eff;
    }
  }
  .form {
    padding: 20px 50px;
    max-height: 600px;
    overflow-y: scroll;
    .tab-item {
      position: relative;
      label {
        position: absolute;
        top: 55px;
      }
    }
    .el-input-number {
      width: 100%;
    }
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-tabs__item {
      padding: 0 40px;
    }
    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }
    .scaleIMGdisabled {
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}
</style>
